<template>
  <div class="resume-education-list">
    <div class="list-header">
      <h3 class="section-title">教育经历</h3>
      <el-button type="primary" @click="addEducation">
        <el-icon><plus /></el-icon>
        添加教育经历
      </el-button>
    </div>

    <!-- 教育经历列表 -->
    <div class="education-list" v-if="educations.length > 0">
      <div 
        v-for="(education, index) in educations" 
        :key="education.id || index"
        class="education-item"
      >
        <div class="item-header">
          <div class="item-title">
            <span class="school">{{ education.school }}</span>
            <span class="degree">{{ education.degree }} · {{ education.major }}</span>
          </div>
          <div class="item-actions">
            <el-button-group>
              <el-button 
                type="primary" 
                link
                @click="editEducation(index)"
              >
                编辑
              </el-button>
              <el-button 
                type="danger" 
                link
                @click="removeEducation(index)"
              >
                删除
              </el-button>
            </el-button-group>
          </div>
        </div>
        <div class="item-content">
          <div class="date-range">
            {{ education.startDate }} - {{ education.endDate }}
          </div>
          <div class="description" v-if="education.description">
            {{ education.description }}
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <el-empty
      v-else
      description="暂无教育经历"
    >
      <el-button type="primary" @click="addEducation">
        添加教育经历
      </el-button>
    </el-empty>

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑教育经历' : '添加教育经历'"
      width="600px"
      @close="resetForm"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100px"
        @submit.prevent
      >
        <el-form-item label="学校名称" prop="school">
          <el-input 
            v-model="formData.school"
            placeholder="请输入学校名称"
          />
        </el-form-item>

        <el-form-item label="学历/学位" prop="degree">
          <el-select
            v-model="formData.degree"
            placeholder="请选择学历/学位"
            style="width: 100%"
          >
            <el-option label="博士" value="博士" />
            <el-option label="硕士" value="硕士" />
            <el-option label="本科" value="本科" />
            <el-option label="专科" value="专科" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>

        <el-form-item label="专业" prop="major">
          <el-input 
            v-model="formData.major"
            placeholder="请输入专业名称"
          />
        </el-form-item>

        <el-form-item label="在校时间">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="startDate">
                <el-date-picker
                  v-model="formData.startDate"
                  type="month"
                  placeholder="开始时间"
                  style="width: 100%"
                  value-format="YYYY-MM"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="endDate">
                <el-date-picker
                  v-model="formData.endDate"
                  type="month"
                  placeholder="结束时间"
                  style="width: 100%"
                  value-format="YYYY-MM"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="在校经历" prop="description">
          <el-input
            v-model="formData.description"
            type="textarea"
            :rows="4"
            placeholder="请描述在校期间的主要经历、成绩、荣誉等（选填）"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm" :loading="submitting">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

// 定义props
const props = defineProps({
  modelValue: {
    type: Array,
    required: true
  }
})

// 定义emit
const emit = defineEmits(['update:modelValue'])

// 计算属性：教育经历列表
const educations = computed(() => props.modelValue || [])

// 更新教育经历列表
const updateEducations = (value) => {
  emit('update:modelValue', value)
}

// 表单ref
const formRef = ref(null)

// 状态
const dialogVisible = ref(false)
const submitting = ref(false)
const isEdit = ref(false)
const currentIndex = ref(-1)

// 表单数据
const formData = ref({
  school: '',
  degree: '',
  major: '',
  startDate: '',
  endDate: '',
  description: ''
})

// 表单校验规则
const formRules = {
  school: [
    { required: true, message: '请输入学校名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  degree: [
    { required: true, message: '请选择学历/学位', trigger: 'change' }
  ],
  major: [
    { required: true, message: '请输入专业名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  startDate: [
    { required: true, message: '请选择开始时间', trigger: 'change' }
  ],
  endDate: [
    { required: true, message: '请选择结束时间', trigger: 'change' }
  ]
}

// 添加教育经历
const addEducation = () => {
  isEdit.value = false
  currentIndex.value = -1
  dialogVisible.value = true
}

// 编辑教育经历
const editEducation = (index) => {
  const education = educations.value[index]
  formData.value = { ...education }
  isEdit.value = true
  currentIndex.value = index
  dialogVisible.value = true
}

// 删除教育经历
const removeEducation = async (index) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这条教育经历吗？',
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    const newEducations = [...educations.value]
    newEducations.splice(index, 1)
    updateEducations(newEducations)
    ElMessage.success('删除成功')
  } catch {
    // 用户取消删除
  }
}

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    submitting.value = true
    
    // 构造教育经历数据
    const educationData = { ...formData.value }
    
    // 更新教育经历列表
    const newEducations = [...educations.value]
    if (isEdit.value && currentIndex.value > -1) {
      newEducations[currentIndex.value] = educationData
    } else {
      newEducations.push(educationData)
    }
    updateEducations(newEducations)
    
    // 关闭对话框
    dialogVisible.value = false
    ElMessage.success(isEdit.value ? '修改成功' : '添加成功')
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    submitting.value = false
  }
}

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
  formData.value = {
    school: '',
    degree: '',
    major: '',
    startDate: '',
    endDate: '',
    description: ''
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.css';

.resume-education-list {
  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    
    .section-title {
      font-size: var(--font-size-lg);
      font-weight: 600;
      color: var(--text-primary);
      margin: 0;
    }
  }
  
  .education-list {
    .education-item {
      background-color: var(--bg-light);
      border-radius: var(--border-radius-md);
      padding: var(--spacing-md);
      margin-bottom: var(--spacing-md);
      
      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--spacing-sm);
        
        .item-title {
          .school {
            font-size: var(--font-size-lg);
            font-weight: 600;
            color: var(--text-primary);
            margin-right: var(--spacing-sm);
          }
          
          .degree {
            color: var(--text-secondary);
          }
        }
      }
      
      .item-content {
        .date-range {
          color: var(--text-secondary);
          font-size: var(--font-size-sm);
          margin-bottom: var(--spacing-xs);
        }
        
        .description {
          color: var(--text-secondary);
          font-size: var(--font-size-sm);
          line-height: var(--line-height-normal);
          white-space: pre-wrap;
        }
      }
    }
  }
}
</style> 